<template>
  <div class="suosou">
    <div class="riao">
      <div
        class="ria"
        :class="riaact == 0 ? 'riaactive' : ''"
        @click="tiatab(0)"
      >
        全部
      </div>
      <div
        class="ria"
        v-for="item in time1"
        :key="item.id"
        :class="riaact == item.id ? 'riaactive' : ''"
        @click="tiatab(item.id)"
      >
        {{ item.mc }}
      </div>
    </div>
    <div class="riao1" v-if="riaact != 58">
      <div class="s11">
        <div class="s11-1" v-if="sjnull == 0">
          <div class="smn" @click="toshow()">
            <div class="">时间</div>
            <i class="el-icon-arrow-down" v-if="show"></i>
            <i class="el-icon-arrow-up" v-else></i>
          </div>
          <div class="smn1" v-if="show">
            <el-checkbox-group v-model="nianfen" @change="shunianfen">
              <el-checkbox
                v-for="tag in yearList"
                :key="tag.name"
                :label="tag.name"
                >{{ tag.name }}
                <span style="font-size: 12px; color: #666; padding-left: 4px"
                  >({{ tag.num }}条)</span
                >
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

       <div class="s11-1" v-if="diqulist.length !=0">
            <div class="smn" @click="toshow1()">
              <div class="">地区</div>
              <i class="el-icon-arrow-down" v-if="show1"></i>
              <i class="el-icon-arrow-up" v-else></i>
            </div>
            <div class="smn1" v-if="show1">
              <el-checkbox-group v-model="diqumax" @change="diqumaxs">
                <el-checkbox v-for="tag in diqulist" :key="tag.dm" :label="tag.dm">{{
                  tag.name
                }}
                <span style="font-size: 12px; color: #666; padding-left: 4px"
                  >({{ tag.num }}条)</span
                >
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        <!-- <div class="s11-1">
          <div class="smn" @click="toshow1()">
            <div class="">类别</div>
            <i class="el-icon-arrow-down" v-if="show1"></i>
            <i class="el-icon-arrow-up" v-else></i>
          </div>
          <div class="smn1" v-if="show1">
            <el-checkbox-group v-model="type" @change="shulb">
              <el-checkbox v-for="tag in time1" :key="tag.id" :label="tag.id">{{
                tag.mc
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div> -->
      </div>
      <div class="s12">
        <div class="cont">
          <div class="cont-1">
            <div>
              检索范围：
              <span v-for="i in type" :key="i">
                <span v-if="i == 58">图片类,</span>
                <span v-if="i == 59">音频类,</span>
                <span v-if="i == 61">申报类,</span>
                <span v-if="i == 62">宣传类,</span>
                <span v-if="i == 63">影视类,</span>
                <span v-if="i == 64">会议类,</span>
                <span v-if="i == 65">培训类,</span>
                <span v-if="i == 66">活动类,</span>
                <span v-if="i == 67">记录工程类,</span>
                <span v-if="i == 57">图片类,音频类，视频类</span>
                <span v-if="i == 60">视频类</span>
              </span>
            </div>
            <div style="padding-left: 24px">
              主题：<span>{{ keyword }}</span>
            </div>
          </div>
          <div class="cont-2">
            <div>
              共找到<span>{{ total }}</span
              >条结果
            </div>
            <!-- <div class="shuliang">1/321</div> -->
          </div>
        </div>
        <div class="cont1">
          <!-- <div class="cont1-1">
                  <div class="cont1-11">
                      <el-checkbox
                      v-model="checkAll"
                      label="全选"
                      @change="handleCheckAllChangeSales"
                      ></el-checkbox>
                  </div>
                  <div class="cont1-12">
                      已选<span>{{bushForm1.length}}</span>项
                  </div>
                
              </div> -->

          <div class="cont1-3">
            <div
              style="
                display: flex;
                justify-content: flex-end;
                align-items: center;
              "
            >
              排序： <span>相关度</span
              ><img src="../../assets/images/pxs.png" alt="" />
            </div>
            <div style="padding-left: 12px">发表时间 : 综合</div>
          </div>
          <div class="cont1-2">
            <div>每页显示</div>
            <div v-if="riaact == 60">
              <el-select v-model="value" placeholder="">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="partTypesClick"
                >
                </el-option>
              </el-select>
            </div>
            <div v-else>
              <el-select v-model="value" placeholder="">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="partTypesClick"
                >
                </el-option>
              </el-select>
            </div>

            <div>条</div>
          </div>
        </div>
        <div v-if="riaact == 0 || riaact == 59">
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.tpid"
            v-show="item.wxlx == 58"
            @click="toimg(item.tpurl,item.tply,item.tpsm)"
          >
            <div class="tupian">
              <div class="tupian1">
                <img :src="item.tpurl" alt="" />
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11">
                    {{ item.tpmc }} <span class="biaoti">(图片)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.tpid, item.tpmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.tpid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2">
                  <span>来源：{{ item.tply }}</span>
                </div>
                <div class="tsm" v-html="item.tpsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.lyid"
            
            v-show="item.wxlx == 59"
          >
            <div class="righ">
              <div class="r1">
                <div class="img1">
                  <div class="img11" @click="toyinpinxq(item.lyid, 59)">
                    <img src="../../assets/images/disc.png" alt="" />
                  </div>
                  <!-- <div class="img12">
                    <img src="../../assets/images/disc1.png" alt="" />
                  </div> -->
                </div>
                <div class="img2" @click="toyinpinxq(item.lyid, 59)">
                  {{ item.lymc }} <span class="biaoti">(音频)</span>
                </div>
              </div>
              <div class="r2" @click="toyinpinxq(item.lyid, 59)">
                <div>时间：{{ item.lysj }}</div>
                <span v-if="item.lyly">|</span>
                <div>{{ item.lyly }}</div>
                <span>|</span>
                <div>格式：{{ item.lygs }}</div>
              </div>
              <!-- <div class="r3" @click="shoucang(57, item.lyid, item.lymc, item)"
                    v-if="item.sfsc == 0">
                <img src="../../assets/images/s1.png" alt="" />
                收藏
              </div>
              <div class="r3" @click="qxshoucang(57, item.lyid, item)"
                    v-else>
                <img src="../../assets/images/s2.png" alt="" />
                收藏
              </div> -->
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
           
            v-show="item.wxlx == 60"
          >
            <div class="tupian">
              <div class="tupian1"  @click="toshipinxq(item.spid, 60)">
                <img  @click="toshipinxq(item.spid, 60)" :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11"  @click="toshipinxq(item.spid, 60)">
                    {{ item.spmc }} <span class="biaoti">(视频类)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2"  @click="toshipinxq(item.spid, 61)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div  @click="toshipinxq(item.spid, 61)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
           
            v-show="item.wxlx == 62"
          >
            <div class="tupian">
              <div class="tupian1"  @click="toshipinxq(item.spid, 62)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11"  @click="toshipinxq(item.spid, 62)">
                    {{ item.spmc }} <span class="biaoti">(宣传类)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2"  @click="toshipinxq(item.spid, 62)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div  @click="toshipinxq(item.spid, 62)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
            
            v-show="item.wxlx == 63"
          >
            <div class="tupian">
              <div class="tupian1" @click="toshipinxq(item.spid, 63)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11" @click="toshipinxq(item.spid, 63)">
                    {{ item.spmc }} <span class="biaoti">(影视类)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2" @click="toshipinxq(item.spid, 63)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div @click="toshipinxq(item.spid, 63)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
           
            v-show="item.wxlx == 64"
          >
            <div class="tupian">
              <div class="tupian1"  @click="toshipinxq(item.spid, 64)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11"  @click="toshipinxq(item.spid, 64)">
                    {{ item.spmc }} <span class="biaoti">(会议类)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2"  @click="toshipinxq(item.spid, 64)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div  @click="toshipinxq(item.spid, 64)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
            
            v-show="item.wxlx == 65"
          >
            <div class="tupian">
              <div class="tupian1" @click="toshipinxq(item.spid, 65)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11" @click="toshipinxq(item.spid, 65)">
                    {{ item.spmc }} <span class="biaoti">(培训类)</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2" @click="toshipinxq(item.spid, 65)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div @click="toshipinxq(item.spid, 65)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
           
            v-show="item.wxlx == 66"
          >
            <div class="tupian">
              <div class="tupian1"  @click="toshipinxq(item.spid, 66)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11"  @click="toshipinxq(item.spid, 66)">
                    {{ item.spmc }} <span class="biaoti">活动类</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2"  @click="toshipinxq(item.spid, 66)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div  @click="toshipinxq(item.spid, 66)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
          <div
            class="cont2"
            v-for="(item, index) in yxList"
            :key="item.spid"
            
            v-show="item.wxlx == 67"
          >
            <div class="tupian">
              <div class="tupian1" @click="toshipinxq(item.spid, 67)">
                <img :src="item.sppicurl" alt="" />
                <div class="bof">
                  <i
                    class="el-icon-caret-right"
                    style="font-size: 35px; color: #fff"
                  ></i>
                </div>
              </div>
              <div class="tupian2">
                <div class="t1">
                  <div class="t11" @click="toshipinxq(item.spid, 67)">
                    {{ item.spmc }} <span class="biaoti">记录工程类</span>
                  </div>
                  <!-- <div class="t12"  @click="shoucang(57, item.spid, item.spmc, item)"
                    v-if="item.sfsc == 0">
                    <img src="../../assets/images/s1.png" alt="" />
                    <div>收藏</div>
                  </div>
                  <div class="t12"  @click="qxshoucang(57, item.spid, item)"
                    v-else>
                    <img src="../../assets/images/s2.png" alt="" />
                    <div>收藏</div>
                  </div> -->
                </div>
                <div class="t2" @click="toshipinxq(item.spid, 67)">
                  <span>来源：{{ item.sply }}</span>
                  <span style="padding: 0 8px">|</span>
                  <span>{{ item.spscrq }}</span>
                  <span style="padding: 0 8px" v-if="item.splbname">|</span>
                  <span>{{ item.splbname ? item.splbname : "" }}</span>
                </div>
                <div @click="toshipinxq(item.spid, 67)" class="tsm" v-html="item.spsm"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="videos">
          <div class="cont2" v-if="yxList.length != 0">
            <div
              class="cont21"
              v-for="(item, index) in yxList"
              :key="index"
              @click="toshipinxq(item.spid, item.wxlx)"
            >
              <img :src="item.sppicurl" alt="" />
              <div class="mc spmcs">
                {{ item.spmc }}
              </div>
              <!-- <div class="times">2019-03-01</div> -->
              <div class="shichang">
                <div class="shi1">
                  <div>
                    <i style="font-size: 20px" class="el-icon-video-play"></i>
                  </div>
                  <div style="padding-left: 6px"></div>
                </div>
                <div class="shi1">
                  <!-- 04:32 -->
                </div>
              </div>
            </div>
            <!-- <div class="cont21"></div>
            <div class="cont21"></div> -->
          </div>
        </div>
        <div class="cont3">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="value * 1"
             :current-page.sync="currentPage4"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-else class="zpq">
      <div class="img_list">
        <section>
          <viewer :images="yxList">
            <!-- <v-touch class="imgDiv" v-for="item in yxList" :key="item.tpid"> -->
              <figure v-for="item in yxList" :key="item.tpid">
                <img :src="item.tpurl" :alt="item.tpmc"  />
                <figcaption class="tpmcs">{{ item.tpmc }}</figcaption>
              </figure>
            <!-- </v-touch> -->
          </viewer>
        </section>
      </div>
      <div class="djjz" @click="dianj()">点击加载更多>></div>
    </div>
  </div>
</template>
<style>
 .viewer-title{
  color: #fff !important;
}
</style>
<style scoped  lang="scss">
::v-deep .viewer-title{
  color: #fff !important;
}
::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
  font-size: 0;
}
::v-deep .el-checkbox {
  padding-bottom: 12px;
}
::v-deep .el-checkbox__label {
  font-size: 12px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}
// 分页
::v-deep .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #911f23;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #911f23;
}
//分页数
::v-deep .el-select-dropdown__item.selected {
  color: #911f23 !important;
}
::v-deep .el-input__inner {
  color: #911f23;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333;
}
::v-deep .el-divider--vertical {
  height: 15px;
}
::v-deep .el-radio {
  .el-radio__input {
    .el-radio__inner {
      border-radius: 2px;
    }
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    content: "";
    width: 8px;
    height: 3px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 1px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
}
::v-deep .el-radio {
  line-height: 30px;
  display: block;
  .el-radio__label {
    font-size: 12px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    span {
      color: #999999;
      padding-left: 10px;
    }
  }
}
::v-deep .el-input--suffix .el-input__inner {
  width: 70px;
  height: 22px;
  margin: 0 6px;
}
/*右侧图标样式  \e790下箭头图标*/
::v-deep .el-select .el-input .el-select__caret.el-input__icon::before {
  content: " \e790";
  color: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}

.suosou {
  width: 1400px;
  margin: 24px auto 90px;
  .riao {
    width: 100%;
    display: flex;
    padding: 0 0 24px;
    .ria {
      padding: 8px 16px;
      border-radius: 4px;
      background-color: #e8e8e8;
      margin-right: 20px;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
    }
    .riaactive {
      background-color: #ede1e2;
      color: #911f23;
    }
  }
  .riao1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .zpq {
    width: 100%;
    .djjz {
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
      color: #911f23;
      cursor: pointer;
    }
    .img_list {
      img {
        display: block;
        border-radius: 10px;
      }
      .tpmcs {
        text-align: center;
        font-size: 14px;
        color: #333;
      }
      section {
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
        column-count: 6;
        column-gap: 0;
        // column-fill: auto;
      }
      figure {
        width: 210px;
        margin: 0 12px 10px;
        break-inside: avoid;
        // padding: 5px;
        /*  font-variant:small-caps */
      }
      figure img {
        width: 100%;
      }
      figcaption {
        padding: 10px 0;
        color: #000;
        margin-left: 10px;
      }
      dialog {
        width: 300px;
        height: 400px;
        background: yellow;
        border: 2px solid white;
      }
    }
  }
  .s11 {
    width: 240px;
    .s11-1 {
      width: 100%;
      // height: 376px;
      margin-bottom: 24px;
      .smn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 32px);
        height: 46px;
        background-color: #f2f2f2;
        border-radius: 8px 8px 0px 0px;
        padding: 0 16px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
      }
      .smn1 {
        width: calc(100% - 32px);
        max-height: 300px;
        overflow: auto;
        padding: 18px 16px 12px;
        background-color: #fff;
        border-radius: 0px 0px 8px 8px;
        // line-height: 45px;
      }
    }
  }
  .s12 {
    width: 1140px;
    .cont {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .cont-1 {
        display: flex;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        span {
          color: #911f23;
        }
      }
      .cont-2 {
        display: flex;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        span {
          color: #911f23;
          padding: 0 4px;
        }
        .shuliang {
          padding-left: 24px;
        }
      }
    }
    .videos {
      width: 100%;
      .cont2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: 16px auto 0;
        .cont21 {
          width: 274px;
          min-height: 205px;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          margin-bottom: 16px;
          position: relative;

          img {
            width: 100%;
            height: 160px;
            border-radius: 4px 4px 4px 4px;
          }
          .mc {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-size: 16px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #3d3d3d;
          }
          .times {
            text-align: right;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
          .shichang {
            position: absolute;
            top: 118px;
            left: 0;
            width: calc(100% - 24px);
            height: 42px;
            padding: 0 12px;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.4) 100%
            );
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .shi1 {
              display: flex;
              align-items: center;

              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }
    .cont1 {
      width: calc(100% - 32px);
      height: 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      margin-top: 16px;

      .cont1-1 {
        width: 40%;
        display: flex;
        .cont1-12 {
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          padding-left: 12px;
          span {
            padding: 0 6px;
            color: #911f23;
          }
        }
        .cont1-13 {
          margin-left: 12px;
          width: 44px;
          height: 22px;
          background: #911f23;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        .cont1-14 {
          margin-left: 12px;
          width: 72px;
          height: 20px;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          border: 1px solid #911f23;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #911f23;
        }
      }
      .cont1-2 {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
      .cont1-3 {
        width: 40%;
        display: flex;
        // justify-content: flex-end;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        img {
          // padding-top: 8px;
          height: 20px;
          width: 20px;
        }
        span {
          color: #911f23;
        }
      }
    }
    .cont2 {
      width: calc(100% - 32px);
      padding: 16px;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      margin-top: 12px;

      display: flex;
      align-items: center;
      cursor: pointer;
      .left {
        width: 5%;
      }
      .righ {
        width: 100%;
        display: flex;
        justify-content: space-between;

        align-content: center;
        .r1 {
          display: flex;
          align-items: center;
          .img1 {
            width: 120px;
            display: flex;
            position: relative;
            img {
              width: 80px;
              height: 80px;
            }
            .img11 {
              z-index: 10;
            }
            .img12 {
              position: absolute;
              left: 40px;
              top: 0;
            }
          }
          .img2 {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            font-size: 16px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #3d3d3d;
            padding-left: 16px;
          }
        }
        .r2 {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #666666;
          span {
            padding: 0 14px;
          }
        }
        .r3 {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          img {
            width: 16px;
            height: 16px;
            padding-right: 2px;
          }
        }
      }
      .tupian {
        width: 100%;
        display: flex;
        .tupian1 {
          position: relative;
          width: 140px;
          height: 110px;
          img {
            width: 100%;
            height: 100%;
          }
          .bof {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .tupian2 {
          width: calc(100% - 160px);
          padding-left: 20px;
          .t1 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .t11 {
              font-size: 18px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 600;
              color: #3d3d3d;
              .biaoti {
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #911f23;
              }
            }
            .t12 {
              display: flex;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              img {
                width: 16px;
                height: 16px;
              }
            }
          }
          .t2 {
            width: 100%;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            padding-top: 10px;
            .tps {
              color: #911f23;
              font-size: 14px;
              font-weight: 550;
            }
          }
          .t3 {
            width: 100%;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #911f23;
            padding-top: 10px;
          }
          .tsm {
            width: 100%;
            padding-top: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666;
          }
        }
      }
    }
    .cont3 {
      width: 1400px;
      margin-top: 16px;
      text-align: center;
      transform: translateX(-10%);
    }
  }
}
</style>

<script>
import { getyinx, getyear, getyxdx, getyearleibie,getsc,
  getqxsc, } from "@/api/api.js";
import Vue from "vue";
import Viewer from "v-viewer";

import "viewerjs/dist/viewer.css";
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 100000,

    inline: false,

    button: true,

    navbar: true,

    title: true,

    toolbar: true,

    tooltip: true,

    movable: true,

    zoomable: true,

    rotatable: true,

    scalable: true,

    transition: true,

    fullscreen: true,

    keyboard: true,

    loop: true,
  },
});
export default {
  data() {
    return {
      currentPage4:1,
      //单选
      riaact: 0,
      options: [
        {
          value: "12",
          label: "12",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "50",
          label: "50",
        },
        {
          value: "100",
          label: "100",
        },
      ],
      options1: [
        {
          value: "12",
          label: "12",
        },
        {
          value: "24",
          label: "24",
        },
        {
          value: "36",
          label: "36",
        },
        {
          value: "48",
          label: "48",
        },
        {
          value: "60",
          label: "60",
        },
      ],
      value: "12",
      radio: "0",
      radio1: "0",
      time: [
        { id: 1, name: "2023", name1: "400" },
        { id: 2, name: "2023", name1: "400" },
        { id: 3, name: "2023", name1: "400" },
        { id: 4, name: "2023", name1: "400" },
        { id: 5, name: "2023", name1: "400" },
        { id: 6, name: "2023", name1: "400" },
        { id: 7, name: "2023", name1: "400" },
        { id: 8, name: "2023", name1: "400" },
        { id: 9, name: "2023", name1: "400" },
        { id: 10, name: "2023", name1: "400" },
      ],
      time1: [
        { id: 58, mc: "图片", fid: 57, num: 0, children: [] },
        { id: 59, mc: "音频", fid: 57, num: 0, children: [] },
        { id: 60, mc: "视频", fid: 60, num: 0, children: [] },
        // { id: 61, mc: "申报类", fid: 60, num: 0, children: [] },
        // { id: 62, mc: "宣传类", fid: 60, num: 0, children: [] },
        // { id: 63, mc: "影视类", fid: 60, num: 0, children: [] },
        // { id: 64, mc: "会议类", fid: 60, num: 0, children: [] },
        // { id: 65, mc: "培训类", fid: 60, num: 0, children: [] },
        // { id: 66, mc: "活动类", fid: 60, num: 0, children: [] },
        // { id: 67, mc: "记录工程类", fid: 60, num: 0, children: [] },
      ],

      show: true,
      show1: true,

      checkAll: false,
      isALL: false, // 全选框是否在勾选状态
      tableData: [
        {
          id: "1",
          code: "Y000028",
          name: "医疗",
        },
        {
          id: "2",
          code: "Y000029",
          name: "场馆",
        },
        {
          id: "3",
          code: "Y000030",
          name: "机场站房",
        },
      ], //全部数据
      bushForm1: [], //选中的数据
      nianfen: [],
      yearList: [],
      type: [59],
      yxList: [],
      total: [],
      pageIndex: 1,
      pageSize: 12,
      jibie: "",
      total: 0,
      danlei: 0,
      sjnull: 0,
      yhm:{},
      //地区排序
      diqulist:[],
      diqumax:[]
    };
  },
  created() {
    // this.diqulist = sessionStorage.getItem("diqu")?JSON.parse(sessionStorage.getItem("diqu")):[]
      this.yhm = JSON.parse(sessionStorage.getItem("loginInfo"))
      ? JSON.parse(sessionStorage.getItem("loginInfo"))
      : "";
    this.danlei = sessionStorage.getItem("yxdangxiang")
      ? sessionStorage.getItem("yxdangxiang")
      : sessionStorage.getItem("gglx");
    if (this.danlei != 0) {
      this.pageSize = 12;
      this.nianfen = sessionStorage.getItem("yxsjnf")
        ? JSON.parse(sessionStorage.getItem("yxsjnf"))
        : [];
      this.yhm = JSON.parse(sessionStorage.getItem("loginInfo"));
      this.type = JSON.parse(sessionStorage.getItem("yxleibie"))
        ? JSON.parse(sessionStorage.getItem("yxleibie"))
        : [0];

      this.keyword = sessionStorage.getItem("sousuo")
        ? sessionStorage.getItem("sousuo")
        : "";
      this.riaact = this.type[0] == 0 ? 0 : this.type[0];
      if (this.riaact == 0) {
        this.type = [57];
      }

      this.yxdl();
      this.getYearlb();
    } else {
      this.nianfen = sessionStorage.getItem("yxsjnf")
        ? JSON.parse(sessionStorage.getItem("yxsjnf"))
        : [];
      this.yhm = JSON.parse(sessionStorage.getItem("loginInfo"));
      this.type = JSON.parse(sessionStorage.getItem("yxleibie"))
        ? JSON.parse(sessionStorage.getItem("yxleibie"))
        : [58, 59, 61, 62, 63, 64, 65, 66, 67];

      this.keyword = sessionStorage.getItem("sousuo")
        ? sessionStorage.getItem("sousuo")
        : "";
      this.riaact = sessionStorage.getItem("yxGaoliang")
        ? sessionStorage.getItem("yxGaoliang")
        : 0;
      this.yx();
      this.getYearlb();
    }
  },
  mounted() {},
  methods: {
    toimg(url,mc,sm){
      const { href } = this.$router.resolve({
        path: "/images",
        query: { url: url, mc: mc,sm:sm },
      });
      window.open(href, "_blank");
    },
    diqumaxs(val){
      console.log(val,'000000000000000')
      if (this.danlei == 1) {
        this.diqumax = val
        this.yxdl();
        this.getYearlb();
      } else {
        this.diqumax = val
        this.yx();
        this.getYearlb();
      }
    
    },
    async shoucang(lx, id, mc, item) {
      let res = await getsc({
        lx: lx,
        zyid: id,
        zymc: mc,
        yhid: this.yhm.id,
      });
      if (res.code == 0) {
        this.scs = id;

        this.$message({
          message: "收藏成功",
          type: "success",
        });
        return (item.sfsc = 1);
      } else {
        this.$message.error(res.msg);
      }
    },
    async qxshoucang(lx, id, item) {
      let res = await getqxsc({
        zylx: lx,
        zyid: id,
        yhid: this.yhm.id,
      });
      if (res.code == 0) {
        this.$message({
          message: "取消收藏成功",
          type: "success",
        });
        item.sfsc = "0";
      } else {
        this.$message.error(res.msg);
      }
    },
    dianj() {
      this.pageIndex = 1;
      this.pageSize += 20;
      if (this.danlei == 0) {
        this.yx();
      } else if (this.danlei == 1) {
        this.yxdl();
      }
    },
    //切换类别
    tiatab(id) {
      this.currentPage4 = 1
      this.sjnull = 0;
      this.pageIndex = 1;
      this.pageSize = 10;
      this.value = "10";
      if (id == 58) {
        this.pageSize = 50;
        this.pageIndex = 1;
      } else {
        this.pageSize = 10;
        this.pageIndex = 1;
      }
      this.riaact = id;
      sessionStorage.setItem("yxGaoliang", JSON.stringify(id));
      if (this.danlei != 1) {
        if (id == 0) {
          this.bookriao = [58, 59, 61, 62, 63, 64, 65, 66, 67];
          this.type = this.bookriao;
          sessionStorage.setItem("yxleibie", 0);
          this.getYearlb();
          this.yx();
        } else {
          this.bookriao = [];
          this.bookriao.push(id);
          this.type = this.bookriao;
          sessionStorage.setItem("yxleibie", JSON.stringify(this.bookriao));
          this.getYearlb();
          this.yx();
        }
        if (id == 60) {
          // this.options = this.options1
          this.value = "12";
          this.pageSize = 12;
          this.bookriao = [61, 62, 63, 64, 65, 66, 67];
          this.type = this.bookriao;
          sessionStorage.setItem("yxleibie", JSON.stringify(this.bookriao));
          this.riaact = id;
          this.yx();
        }
      } else {
        this.pageSize = 12
        this.value = 12
        if (id == 0) {
          this.bookriao = [57];
          // this.bookriao.push(id)
          this.type = this.bookriao;
          sessionStorage.setItem("yxleibie", 0);
          // this.riaact = id
          this.yxdl();
          this.getYearlb();
        } else {
          this.bookriao = [];
          this.bookriao.push(id);
          this.type = this.bookriao;
          sessionStorage.setItem("yxleibie", JSON.stringify(this.bookriao));
          // this.riaact = id
          this.yxdl();
          this.getYearlb();
        }
      }
    },
    async yxdl() {
      let formData = new FormData();
      // 调用append()方法添加数据
      formData.append("jibie", this.jibie);
      formData.append("keyword", this.keyword);
      formData.append("pageIndex", this.pageIndex);
      formData.append("pageSize", this.pageSize);
      // formData.append("zhaopian", this.up1);
      if (this.type.length != 0) {
        var arr = [61, 62, 63, 64, 65, 66, 67];
        this.type.map((item, index) => {
          formData.append("type ", item);
        });
      }
      if (this.nianfen.length != 0) {
        this.nianfen.map((item, index) => {
          formData.append("year ", item);
        });
      }
      if(this.diqumax.length !=0){
        this.diqumax.map((item, index) => {
          formData.append("area ", item);
        })
      }

      let res = await getyxdx(formData);
    
      this.yxList = res.list;
      this.total = res.total;
    },
    partTypesClick(e) {
      this.pageSize = this.value;
      if (this.danlei == 0) {
        this.yx();
      } else if (this.danlei == 1) {
        this.yxdl();
      }
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      if (this.danlei == 0) {
        this.yx();
      } else if (this.danlei == 1) {
        this.yxdl();
      }
    },
    async yx() {
      let formData = new FormData();
      // 调用append()方法添加数据
      formData.append("jibie", this.jibie);
      formData.append("keyword", this.keyword);
      formData.append("pageIndex", this.pageIndex);
      formData.append("pageSize", this.pageSize);
      // formData.append("zhaopian", this.up1);

      if (this.type.length != 0) {
        this.type.map((item, index) => {
          formData.append("type ", item);
        });
      }
      if (this.nianfen.length != 0) {
          this.nianfen.map((item, index) => {
        
          formData.append("year ", item);
        });
      }
      if(this.diqumax.length !=0){
        this.diqumax.map((item, index) => {
          formData.append("area ", item);
        })
      }

      let res = await getyinx(formData);
  
      this.yxList = res.list;
      this.total = res.total;
    },
    shulb(val) {
      this.yxList = [];
      this.pageIndex = 1;
      this.type = val;
      this.danlei = 0;
      sessionStorage.setItem("yxleibie", JSON.stringify(val));
      sessionStorage.setItem("yxdangxiang", 0);
      this.yx();
    },
    shunianfen(val) {;
      if (this.danlei == 1) {
        this.yxList = [];
        this.pageIndex = 1;
        this.nianfen = val;
        sessionStorage.setItem("yxsjnf", JSON.stringify(val));
        this.getYearlb();
        this.yxdl();
      } else {
        this.yxList = [];
        this.pageIndex = 1;
        this.nianfen = val;
        sessionStorage.setItem("yxsjnf", JSON.stringify(val));
        this.getYearlb();
        this.yx();
      }
    },

    async getYear() {
      this.nianfen = [];
      let res = await getyear();
      if (res.code == 200) {
        this.yearList = res.data;
      }
    },
    async getYearlb() {
      let formData = new FormData();
      // 调用append()方法添加数据
      formData.append("keyword", this.keyword);
      formData.append("lm", 57);
      if (this.type.length != 0) {
        this.type.map((item, index) => {
          formData.append("type ", item);
        });
      }
      if(this.diqumax.length !=0){
        this.diqumax.map((item, index) => {
          formData.append("area ", item);
        })
      }
       if (this.nianfen.length != 0) {
        this.nianfen.map((item, index) => {
          formData.append("year ", item);
        });
      }
      let res = await getyearleibie(formData);
      if (res.code == 0) {
        this.yearList = res.data.yearList;
        this.diqulist = res.data.dqList;
        if (res.data.yearList == null) {
          this.sjnull = 1;
        }
      }
    },
    toyinpinxq(id, lx) {
      const { href } = this.$router.resolve({
        path: "/audio",
        query: { id: id, lx: lx },
      });
      window.open(href, "_blank");
      // this.$router.push({ path: "/audio", query: { id: id,lx:lx } });
    },
    toshipinxq(id, lx) {
      const { href } = this.$router.resolve({
        path: "/video",
        query: { id: id, lx: lx },
      });
      window.open(href, "_blank");
      // this.$router.push({ path: "/video", query: { id: id,lx:lx } });
    },
    handleCheckAllChangeSales(val) {
      this.bushForm1 = [];
      var checkedsItem = val ? this.tableData : [];
      if (checkedsItem.length > 0) {
        checkedsItem.forEach((item) => {
          this.bushForm1.push(item.id);
        });
      } else {
        this.bushForm1 = [];
      }
      this.isALL = false;
    },

    handleCheckedColumnChangeSales(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isALL = checkedCount > 0 && checkedCount < this.tableData.length;
    },
    toshow() {
      this.show = !this.show;
    },
    toshow1() {
      this.show1 = !this.show1;
    },
  },
  computed: {},
  components: {},
};
</script>
